<script setup lang="ts">
import titleIcon from "@/assets/other/title-icon.png";
import { useRouterNavigation } from "@/router/utils";
import { useStoreOrderDetail } from "../hook";
const { go } = useRouterNavigation();

// icons
import arrowLeft from "@iconify-icons/ep/arrow-left";
import dayjs from "dayjs";

defineOptions({
  name: "DistributionSupplierDetail"
});

const {
  loading,
  orderForm,
  goodsColumns,
  deliveryGoodsColumns,
  isStoreManager,
  getSummaries,
  stepIndex,
  stepList,
  storeForm,
  getOrderStatus,
  doCancel,
  handleOpt,
  upOrderGoods,
  getOrderDetail
} = useStoreOrderDetail(2);
</script>

<template>
  <div v-loading="loading" class="order-detail">
    <el-card class="w-full mb-[10px]" shadow="always">
      <div
        class="flex items-center cursor-pointer mb-5"
        style="font-size: 16px"
        @click.stop="go(-1)"
      >
        <IconifyIconOffline :icon="arrowLeft" class="mr-2" />
        <div class="order-title">
          <img :src="titleIcon" width="7" height="14" /> 订单信息
        </div>
      </div>

      <!-- 订单信息 -->
      <div class="header">
        <div class="cell">
          采购订单编号：{{ orderForm.storeOrderCode || "--" }}
        </div>
        <div class="cell">子订单编号：{{ orderForm.suborderCode || "--" }}</div>
        <div class="cell">
          下单时间：{{ dayjs(orderForm.gmtCreate).format("YYYY-MM-DD HH:mm") }}
        </div>
        <div class="cell">
          采购总数量：<span class="text-red-500">{{
            orderForm.totalCommodities || "--"
          }}</span>
        </div>
        <div class="cell">
          发货总数量：<span class="text-red-500">{{
            orderForm.quantityShipped || "--"
          }}</span>
        </div>
        <div class="cell">备注：{{ orderForm.des || "--" }}</div>
      </div>
      <div class="status">
        <div class="s-left">
          <div class="status-text">
            {{ getOrderStatus(orderForm.suborderOrderStatus) }}
          </div>
        </div>
        <div class="s-right">
          <el-steps :active="stepIndex" finish-status="success">
            <el-step
              v-for="(item, index) in stepList"
              :key="index"
              :title="item.title"
              :description="item.description"
            />
          </el-steps>
        </div>
      </div>

      <!-- 门店仓信息 -->
      <div class="store-info">
        <h3 class="text-black mb-2">门店仓信息</h3>
        <el-form label-position="right" label-width="80px">
          <div class="flex">
            <el-form-item label="仓库编码" prop="depositoryId" class="flex-1">
              <div>{{ orderForm.depository.depositoryCode || "--" }}</div>
            </el-form-item>
            <el-form-item label="仓库名称" prop="depositoryId" class="flex-1">
              <div>{{ orderForm.depository.depositoryName || "--" }}</div>
            </el-form-item>
            <el-form-item label="状态" prop="depositoryId" class="flex-1">
              <div>
                {{ orderForm.depository.status == 1 ? "禁用" : "启用" }}
              </div>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item
              label="联系人"
              prop="depositoryId"
              class="flex-1 items-start"
            >
              <div>{{ orderForm.depository.contacts || "--" }}</div>
            </el-form-item>
            <el-form-item
              label="联系方式"
              prop="depositoryId"
              class="flex-1 items-start"
            >
              <div>{{ orderForm.depository.contact || "--" }}</div>
            </el-form-item>
            <el-form-item label="地址" prop="depositoryId" class="flex-1">
              <div>{{ orderForm.depository.address || "--" }}</div>
            </el-form-item>
          </div>
          <el-form-item label="备注" prop="depositoryId" class="flex-1">
            <div>{{ orderForm.depository.des || "--" }}</div>
          </el-form-item>
        </el-form>
      </div>
      <div class="goods-table">
        <pure-table
          row-key="id"
          align-whole="center"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
          max-height="500"
          :data="orderForm.orderItemResponses"
          :columns="goodsColumns"
        />
      </div>
    </el-card>

    <!-- 发货信息 -->
    <el-card>
      <div class="order-title mb-5">
        <img :src="titleIcon" width="7" height="14" /> 发货信息
      </div>
      <el-collapse
        v-for="(item, index) in orderForm.deliveryList"
        :key="item.id"
        :model-value="0"
        class="dcollapse"
      >
        <el-collapse-item :name="index">
          <template #title>
            <div
              class="flex w-full items-center justify-between pr-3"
              style="border-bottom: 1px solid #efefef"
            >
              <div class="flex items-center">
                <div v-if="item.distributionCode" class="mr-[35px]">
                  配货单号: {{ item.distributionCode || "--" }}
                </div>
                <div class="mr-[35px]">运单号: {{ item.num || "--" }}</div>
                <div class="mr-[35px]">承运商: {{ item.comName || "--" }}</div>
                <div class="mr-[35px]">
                  创建时间:
                  {{ dayjs(item.gmtCreate).format("YYYY-MM-DD HH:mm") }}
                </div>
                <div>创建人: {{ item.createUser || "--" }}</div>
              </div>
              <div v-if="item.status === 0" @click.stop>
                <el-popconfirm
                  title="是否确认作废?"
                  @confirm="doCancel(item, index)"
                >
                  <template #reference>
                    <el-button type="primary" class="ml-5" plain size="small">
                      作废
                    </el-button>
                  </template>
                </el-popconfirm>
              </div>
              <el-tag v-else class="ml-1" type="danger" size="small">
                已作废
              </el-tag>
            </div>
          </template>
          <div
            style="border: 1px solid #efefef; border-bottom: none; margin: 20px"
          >
            <pure-table
              row-key="id"
              align-whole="center"
              :header-cell-style="{
                background: 'var(--el-fill-color-light)',
                color: 'var(--el-text-color-primary)'
              }"
              max-height="500"
              :data="item.goodsDetailResponses || []"
              :columns="deliveryGoodsColumns"
            />
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-empty
        v-if="orderForm.deliveryList.length == 0"
        class="m-auto"
        description="暂无发货信息~"
      />
    </el-card>
  </div>
</template>
<style lang="scss" scoped>
.order-detail {
  min-width: 1000px;
  font-size: 14px;
  box-shadow: none !important;
}
.el-form-item {
  margin-bottom: 2px;
}

.order-title {
  color: black;
  font-weight: bold;
  font-size: 16px;
  display: flex;
  align-items: center;
  > img {
    margin-right: 8px;
  }
}

:deep(.dcollapse .el-collapse-item__content) {
  padding-bottom: 0;
}

:deep(.dcollapse .el-collapse-item__wrap) {
  border: none;
}

.header {
  color: #74714f;
  display: flex;
  flex-wrap: wrap;
  padding: 15px 0 0;
  border-top: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  .cell {
    margin: 0 25px 15px 0;
  }
}

.status {
  padding: 25px;
  border-bottom: 1px solid #dcdfe6;
  display: flex;
  margin-bottom: 15px;
  .s-left {
    border-right: 1px solid #dcdfe6;
    padding: 0 45px 0 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    .status-text {
      font-size: 22px;
      font-weight: bold;
    }
  }
  .s-right {
    flex: 1;
    padding-left: 50px;
  }
}

.store-info {
  padding: 15px;
  border-radius: 8px;
  background-color: #efefef;
  margin-bottom: 15px;
}

.goods-table {
  border: 1px solid #dcdfe6;
  padding: 15px;
  border-radius: 8px;
}

:deep(.goods-table .el-table__footer-wrapper tfoot td.el-table__cell) {
  border-top: 1px solid #efefef;
  background-color: #fff;
}
</style>
